<template>
  <div style="background-color:#f3f7fa">
    <!-- 页头 -->
    <div class="pageTop">
      <el-page-header title="返回" @back="goBack" content="详情页面">
      </el-page-header>
    </div>

    <!-- 大图轮播展示 -->
    <div style="padding: 15px 0 0 0; margin: 10px 80px; 0 290px">
      <el-carousel autoplay loop :interval="5000" type="card" height="300px">
        <el-carousel-item v-for="(item, index) in roomList" :key="index">
          <el-tooltip effect="dark" :content="item.name" placement="left-start">
            <el-image
              fit="contain"
              class="el-image"
              :src="item.path"
            ></el-image>
          </el-tooltip>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 酒店基本信息 -->
    <div style="padding: 0 270px 20px 270px; " class="hotel_basic">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size:28px">
            {{ detailBody.chineseName }}
          </span>
          <div>
            <span style="padding-left: 3px">
              {{ detailBody.starName + " - " }}
              {{ detailBody.debutYear + "年开业 - " }}
              {{ detailBody.address }}
              <!-- 评分 -->
              <el-rate v-model="star" disabled text-color="#ff9900"> </el-rate>
            </span>
          </div>
        </div>
        <!-- 地址信息 -->
        <div class="text item">
          {{ detailBody.instruction }}
        </div>
      </el-card>
    </div>

    <!-- 其他信息 -->
    <div
      style="
    position: relative;
    top: -50px;"
    >
      <el-breadcrumb separator="/" style="margin: 10px 0 0 270px">
        <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
        <el-breadcrumb-item>房型</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 房间展示 -->
      <div
        style="padding: 0 240px; background-color: #f3f7fa; border-radius: 10px"
      >
        <div style="padding: 0 10px; background-color: #FFFFFF; "></div>
      </div>

      <el-breadcrumb separator="/" style="margin: 10px 0 0 270px">
        <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
        <el-breadcrumb-item>其他</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 设施 -->
      <!-- 服务 -->
      <!-- 政策 -->
      <div>
        <el-collapse v-model="activeName" accordion>
          <div class="collapase-item">
            <el-collapse-item
              title="设施"
              name="1"
              v-show="detailBody.facilities"
            >
              <!-- <div class=""> -->
              <span v-for="(item, index) in detailBody.facilities" :key="index">
                <!-- {{item}} -->
                <!-- <span> -->
                {{ item.name }}
                <!-- </span> -->
              </span>
              <!-- </div> -->
            </el-collapse-item>
          </div>
          <div class="collapase-item">
            <el-collapse-item
              title="服务"
              name="2"
              v-show="detailBody.services"
            >
              <span v-for="(item, index) in detailBody.services" :key="index">
                <!-- {{item}} -->
                <!-- <span> -->
                {{ item.name }}
                <!-- </span> -->
              </span>
            </el-collapse-item>
          </div>

          <div class="collapase-item">
            <el-collapse-item title="政策" name="3" v-show="policy != null">
              <div>入住时间：14:00以后 离店时间：12:00以前</div>
              <div>14:00之后可办理入住 12:00之前需办理离店</div>
              <div>
                不接受18岁以下客人单独入住。1名0-17岁儿童使用现有床铺免费，不含儿童早餐。
              </div>
              <div>
                不可携带宠物。
              </div>
            </el-collapse-item>
          </div>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { min } from "moment";
export default {
  data() {
    return {
      hotelId: 0,
      detailBody: {},
      star: 0,
      roomList: [],
      activeName: "1",
      policy: null
    };
  },
  mounted() {
    // 加载效果
    const loading = this.$loading({
      lock: true,
      text: "拼命加载中"
    });
    setTimeout(() => {
      loading.close();
    }, 800);
    // console.log(this.$route.query);
    // 查询酒店详情
    // http[s]://route.showapi.com/1653-3?showapi_appid=619461&showapi_sign=80d8f69af9f44768b38cdd075c6a2746
    var hotelId = this.$route.query.hotelId;
    this.hotelId = hotelId;
    var that = this;
    this.$axios({
      url: `https://route.showapi.com/1653-3?showapi_appid=619461&showapi_sign=80d8f69af9f44768b38cdd075c6a2746&hotelId=${hotelId}`,
      method: "GET"
    }).then(res => {
      console.log(res.data.showapi_res_body.data); //.showapi_res_body.data
      that.detailBody = res.data.showapi_res_body.data;
      that.star = that.detailBody.star;
      if (that.star > 5) {
        that.star = that.star / 2;
      }
      // 只展示最多 10 条图片数据
      let roomCount = Math.min(that.detailBody.pictures.length, 10);
      that.roomList = that.detailBody.pictures.slice(0, roomCount);
      console.log(this.roomList);
      var { policy } = that.detailBody;
      that.policy = policy;
    });

    // 查询酒店房型
    /*
    https://route.showapi.com/1653-4?showapi_appid=替换自己的值&showapi_sign=替换自己的值
     */
    this.$axios({
      url: `https://route.showapi.com/1653-4?showapi_appid=619461&showapi_sign=80d8f69af9f44768b38cdd075c6a2746&hotelId=${hotelId}`,
      method: "GET"
    }).then(res => {
      // console.log(res);
      // console.log(res.data.showapi_res_body.data); //.showapi_res_body.data
    });
  },
  methods: {
    goBack() {
      console.log("返回");
    }
  }
};
</script>

<style lang="less">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 960px;
  // border-radius: 100px;
  background-color: #ffffff;
}

.el-image {
  // width: 500px;
  width: 100%;
  // height: 400px;
}

/* 页头 */
.pageTop {
  margin: 0 0 0 270px;
  padding: 10px 0 0 0;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}
// 轮播图
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 400px;
  width: 500px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.hotel_basic {
  position: relative;
  top: -38px;
  z-index: 999;
}

.collapase-item {
  padding: 0 280px 0 272px;
}

.el-collapse-item__content {
  padding: 10px;
}

.el-collapse-item__header {
  padding: 0 15px;
}

.el-breadcrumb {
  padding: 10px 0;
}
</style>
